import { getEventList, getFrameEventList } from '@/api/event';
import { getDetail, getFrameDetail } from '@/api/manager';
import { eventMap } from '@/utils';
import { UserOutlined } from '@ant-design/icons';
import { useParams } from '@umijs/max';
import { Avatar, Card, Table } from 'antd';
import dayjs from 'dayjs';
import React from 'react';

const Detail = () => {
  const { id } = useParams();
  const [eventData, setEventData] = React.useState([]);
  const [data, setData] = React.useState(null);

  const columns2 = [
    {
      title: '时间',
      dataIndex: 'time',
      width: 200,
      key: 'time',
      render: (_) => {
        if (_) return dayjs(_).format('YYYY-MM-DD');
        return '暂无';
      },
    },
    {
      title: '事项类型',
      width: 150,
      dataIndex: 'type',
      key: 'type',
      render: (_) => {
        if (_) return eventMap[_];
        return '暂无';
      },
    },
    {
      title: '项目单位',
      dataIndex: 'project_company_name',
      key: 'project_company_name',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '项目名称',
      dataIndex: 'project_name',
      key: 'project_name',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '描述',
      dataIndex: 'desc',
      key: 'desc',
    },
  ];

  const initEvent = async (id) => {
    const resp = await getFrameEventList({
      manager_id: id,
    });
    console.log('😈resp', resp);
    let { list } = resp?.data;
    console.log('😈list', list);
    setEventData(list);
  };

  const init = async (id) => {
    const resp = await getFrameDetail({
      id,
    });
    console.log('init', resp);
    setData(resp?.data);
  };

  React.useEffect(() => {
    init(id);
    initEvent(id);
  }, []);

  return (
    <div style={{ padding: 20 }}>
      <Card title="基本信息">
        <div className="flex">
          {data?.avatar ? (
            <img
              src={data?.avatar}
              alt=""
              style={{ width: '200px', height: '200px', objectFit: 'contain' }}
            />
          ) : (
            <Avatar size={200} shape="square" icon={<UserOutlined></UserOutlined>}></Avatar>
          )}
          <div
            className="flex-col"
            style={{ marginLeft: 20, fontSize: 16, fontWeight: 'bold', gap: '5px' }}
          >
            <div>姓名：{data?.name}</div>
            <div>性别：{data?.sex}</div>
            <div>区划：{data?.area?.replace(/,/g, '')}</div>
            <div>任职单位：{data?.company_name}</div>
            <div>项目单位：{data?.project_company_name}</div>
            <div>项目名称：{data?.project_name}</div>
            <div>成绩：{data?.score}</div>
          </div>
        </div>
      </Card>
      <Card title="信用信息历史" className="mt10">
        <Table columns={columns2} dataSource={eventData}></Table>
      </Card>
    </div>
  );
};

export default Detail;
